<template>
    <div class="box">
      <!--  -->
      <div class="content">
        <div class="title">
          <!--    进出口      -->
          <span class="title_item">{{customsName}}</span>
          <!--    hs编码      -->
          <span class="title_item" v-if="info.hs">HS Code/HS编码：{{info.hs}}</span>
          <!--    开始时间      -->
          <span class="title_item">From /从：{{filterTime(info.dateShow[0])}} </span>
          <!--    结束时间      -->
          <span class="title_item">To /到：{{filterTime(info.dateShow[1])}}  </span>
          <!--    供应商      -->
          <span class="title_item" v-if="info.Shipper_name">Shipper name/供应商：{{info.Shipper_name}}</span>
          <!--    采购商      -->
          <span class="title_item" v-if="info.Consignee_name">Consignee name/采购商：{{info.Consignee_name}}</span>
          <!--    国家地区      -->
          <span class="title_item" v-if="info.country">Country/国家：{{info.country}}</span>
        </div>

      <!--  月份分析    -->
        <div style=" padding: 15px 25px;background-color: white;border-radius: 20px;">
          <div class="top">
            <p class="month_title">月度分析</p>

            <div class="btn">
              <span class="item" :class="showTable ? 'active' : ''" @click="showTable = true">表格</span>
              <span class="item" :class="!showTable ? 'active' : ''" @click="showTable = false">图表</span>
            </div>

          </div>
          <el-table
            v-show="showTable"
            :data="tableData"
            stripe
            style="width: 100% ">
            <el-table-column
              v-for="(item, index) in headerArr"
              :key="index"
              :label="item"
            >
              <template slot-scope="scope">
                <div>
                <span>
                  {{scope.row[index]}}
                </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="!showTable" id="monthChart" style="height: 300px;width: 1150px"></div>
        </div>
      </div>
    </div>
</template>

<script>
   import {getMOnthData, getTname} from '@/api/automation/customs'
    export default {
        name: "detail",
        data() {
            return {
                showTable: true,
                tableData: [],
                data: {
                    "t": "month",
                    "basename": '',
                    "col": '',
                    "chartInt": 10,
                    "crowInt": 80,
                    "chartpms": 3,
                    "pageSize": 80,
                    "lb": '',
                    "bianliang": '',
                    "yf": "",
                    "nian": ""
                },
                urlData: {
                    c: '',
                    w: '',
                    u: '',
                    cls: '',
                    cl: ''
                },
                legend: [],
                sumQuantity: [],
                headerArr: [],
                sumValue: [],
                customsName: '',
                info: {
                    hs: '',
                    dateShow: [],
                    Shipper_name: '',
                    Consignee_name: '',
                    country: ''
                }
            }
        },
        created() {
            this.info = JSON.parse(this.$route.query.info)
            let name = this.info.en.split(" ")[0]
            this.customsName = name + ' / ' + this.info.ch
            this.data.basename = this.info.basename
            this.data.col = this.info.cl
            this.data.lb = this.info.lb
            this.data.bianliang = this.info.value

            this.urlData.c = this.info.c
            this.urlData.w = this.info.w
            this.urlData.u = this.info.u
            this.urlData.cls = this.info.cls
            this.urlData.cl = this.info.cl
            this.init()
        },
        methods: {
            init() {
                // 后台注册tname
                getTname(this.urlData).then(() => {

                    getMOnthData(this.data).then(res => {
                        if (res.data.data.list) {
                            this.show = true
                            this.tableData = res.data.data.list
                            this.headerArr = res.data.data.title
                            //折线图处理数据 - 年- 月
                            let title = [];

                            // x轴处理
                            let legend = []
                            this.tableData.forEach(value => {
                                legend.push(value[0] + '-' + value[1])
                            })

                            this.headerArr.map((item, index) => {
                                if (item != '年' && item != '月') {
                                    title.push({
                                        title: item,
                                        index: index
                                    })
                                }
                            })
                            let end = {};
                            title.map(itemGrade => {
                                let arr = [], name = itemGrade.title;
                                this.tableData.map((item) => {
                                    arr.push(item[itemGrade.index])
                                })
                                end[name] = arr;
                            })
                            this.drawLine(end, legend)
                        }
                    })
                })
            },
            filterTime(str) {
                if (this.info.ch.indexOf('航运') != -1) {
                    return str.split("-")[0]
                } else {
                    return str
                }
            },
            drawLine(obj, legend) {

                let arr=[];
                let xData = []
                Object.keys(obj).map((key)=>{
                    arr.push({
                        name:key,
                        type:'line',
                        stack: key,
                        data:obj[key]
                    })
                    xData.push(key)
                })
                console.log(arr)


                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('monthChart'))
                // 绘制图表
                let options = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: xData
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: legend
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: arr
                };
                myChart.setOption(options)
            }
        }
    }
</script>

<style scoped>
  .title{
    padding: 21px 35px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .title_item{
    margin-right: 50px;
    display: inline-block;
  }
  .box{
    background-color: #F5F5F5;
    height: 100%;
    overflow: auto;
  }
  .content{
    width: 1200px;
    margin: 30px auto;
    overflow-y: auto;
  }
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
    background-color: white;
  }
  .item{
    width: 80px;
    height: 25px;
    display: inline-block;
    color: #2A97F9;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    font-size: 14px;
  }
  .btn{
    border: 2px solid #2A97F9;
    border-radius: 10px;
    overflow: hidden;
  }
  .month_title{
    color: #2A97F9;
    font-size: 13px;
    font-weight: 600;
  }
  .active{
    background-color: #2A97F9;
    color: white;
  }

</style>
